<template>
  <div class="nav">
    <div class="nav-job">
      <div class="a"></div>
      <div>购物车</div>
      <div @click="showConfirmDialog">删除</div>
    </div>
  </div>
  <div class="shangpin" v-for="(item, index) in cartList">
    <!-- <van-radio-group class="qwe" shape="square" v-model="item.action_checked">
      <van-radio :name="true" @click="toggleCheck(item, index)"></van-radio>
    </van-radio-group> -->

    <div
      :class="{ active: item.action_checked }"
      @click="toggleCheck(item, index)"
    >
      选
    </div>

    <img :src="item.image" alt="" style="width: 100px; height: 100px" />
    <div class="shangpin-item">
      <div>{{ item.goods_name }}</div>
      <div class="c">
        <div class="b">
          ￥<span>{{ item.price / 100 }}</span>
        </div>
        <div style="">{{ item.sku_name }}</div>
        <div>
          <van-stepper
            v-model="item.buy_num"
            min="0"
            integer
            :max="item.stock"
          />
        </div>
      </div>
    </div>
  </div>

  <div class="dibu">
    <div class="dibu-job">
      <div><van-radio shape="square" name="1"></van-radio></div>
      <div>全选</div>
    </div>
    <div class="dibu-item">
      合计：<span>¥</span
      ><span class="qq">
        {{ totalPrice }}
      </span>
    </div>
    <router-link to="/qujiesuanView"><div class="oo">去结算</div></router-link>
  </div>
  <!-- <div class="tt">
    <van-submit-bar class="ttt"  :price="21600" button-text="提交订单" >
      <van-checkbox>全选</van-checkbox>
    </van-submit-bar>
  </div> -->
</template>

<script setup>
import { ref, onMounted, onActivated, computed } from "vue";

import { getCart, updateCart as updateCartApi } from "@/api/cart";

const cartList = ref([]);

const totalPrice = computed(() => {
  let total = 0;
  cartList.value.forEach((item) => {
    if (item.action_checked) {
      total += item.buy_num * item.price;
    }
  });

  return total / 100;
});

//  切换选中状态

function toggleCheck(item, index) {
  console.log(item, index);

  item.action_checked = !item.action_checked;
  // cartList.value[index].action_checked = !item.action_checked;

  // 调接口   让服务器改

  updateCart(item._id, item.action_checked).then((res) => {
    console.log(res);

    getList();
  });

  //  伏笔  和更改数量一样
}

onActivated(() => {
  getList();
});

function updateCart(_id, action_checked) {
  return updateCartApi({
    _id,
    action_checked,
  });
}

function getList(params) {
  getCart().then((res) => {
    console.log(res);
    cartList.value = res.list;
  });
}
</script>

<style scoped>
.nav-job {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  border-bottom: 1px solid #ccc;
}
.nav-job div:nth-child(2) {
  color: #09b674;
}
.shangpin {
  display: flex;
  padding: 5px;
}
.shangpin-item {
  margin-top: 10px;
}
.shangpin-item div {
  padding: 5px 0;
}
.b {
  color: #f00;
  margin-top: 8px;
}
.b span {
  color: #f00;
  font-size: 18px;
}
.c {
  display: flex;
  color: #ccc;
}
.c div:nth-child(2) {
  margin-left: 10px;
  margin-top: 10px;

  font-weight: 100;
}
.c div:nth-child(3) {
  margin-left: 20px;
}
.qwe {
  margin-top: 50px;
}
.recommend {
  display: flex;
  justify-content: center;
  padding: 20px 0;
  color: #09b674;
}
.recommend-job {
  font-size: 18px;
}
.wen {
  color: #09b674;
  font-size: 12px;
  padding: 0 10px;
}
.shangping img {
  width: 150px;
  height: 150px;
}
.aa {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
}
.aa div:nth-child(2) {
  color: #ccc;
  text-decoration: line-through;
  font-weight: 100;
}
.bb {
  color: #f00;
}
.bb span {
  color: #f00;
  font-size: 18px;
}
.shangping {
  padding: 10px;
  display: flex;
  justify-content: space-around;
}
.shangping-job {
  width: 50%;
}
.shangpin-jobb div:nth-child(2) {
  font-size: 14px;
}
.pp {
  display: flex;
}
.dibu {
  display: flex;
  justify-content: space-between;
  /* border: 1px solid #000; */
  position: absolute;
  bottom: 50px;
  width: 375px;
  height: 49px;
  background-color: #ececec;
}
.dibu-item {
  margin-top: 12px;
  margin-left: 40px;
}
.dibu-job {
  display: flex;
  margin-top: 15px;
}
.dibu-job div:nth-child(2) {
  margin-left: 10px;
}
.qq {
  color: #f00;
  font-size: 20px;
}
.dibu span {
  color: #f00;
}
.oo {
  background-color: #09b674;
  color: #fff;
  width: 105px;
  height: 49px;
  line-height: 49px;
  text-align: center;
}
.active {
  color: red;
}
</style>
